
<template>
    <div class="jd-category">
        <JdHeader title="分类" back></JdHeader>
        <div class="slide" ref="slide">
            <!-- 通过给inner元素定位的方法,可以实现出界回弹效果 -->
            <div class="inner" ref="inner" :style="{ top: posY + 'px' }" @touchstart="startHandler"
                @touchmove="moveHandler" @touchend="endHandler">
                <van-sidebar v-model="index" @change="slideChangeHandler">
                    <van-sidebar-item v-for="item in cateList" :title="item" />
                </van-sidebar>
            </div>
        </div>
        <div class="content">
            <div class="item" v-for="item in goodsList">
                <p class="title">{{ item.brand }}</p>
                <ul>
                    <li v-for="t in item.list">
                        <img :src="t.img1" alt="">
                        <img :src="t.img2" alt="">
                        <img :src="t.img3" alt="">
                        <img :src="t.img4" alt="">
                        <!-- <p>名称</p> -->
                       
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { categoryListApi, cateBrandListApi, categoryBrandGoodsListApi } from '@/api/goods'

// 导入ts相关接口
import type { MyCateBrandGoodsItem } from '@/config/interface'
// 准备一个数据,表示当前触发的导航
const index = ref<number>(0)

// 操作让侧边栏滑动 + 回弹
// 准备变量
const startY = ref<number>(0)
const moveY = ref<number>(0)
const startTop = ref<number>(0)
const posY = ref<number>(0)
// 拿到元素
const inner = ref<HTMLDivElement | null>(null)
const slide = ref<HTMLDivElement | null>(null)

// 鼠标按下的事件
const startHandler = (e: TouchEvent) => {
    // 记录光标初始位置
    startY.value = e.touches[0].clientY
    // 记录元素初始位置
    startTop.value = (inner.value as HTMLElement).offsetTop
    // console.log(startTop.value);

}

// 鼠标移动的事件
const moveHandler = (e: TouchEvent) => {
    // 随时拿到坐标位置
    moveY.value = e.touches[0].clientY - startY.value
    // 随着移动, 实时操作posY 数值
    posY.value = moveY.value + startTop.value

    // 判断边界值
    if (posY.value >= 100) posY.value = 100
    if (
        posY.value <=
        -(inner.value as HTMLElement).offsetHeight -
        - (slide.value as HTMLElement).offsetHeight - 100
    ) posY.value =
        -(inner.value as HTMLElement).offsetHeight -
        - (slide.value as HTMLElement).offsetHeight - 100
}

// 鼠标移出的事件
const endHandler = () => {
    moveY.value = 0

    // 上方回弹
    if (posY.value >= 0) {
        posY.value = 0
    }

    // 下方回弹
    if (
        posY.value <=
        -(inner.value as HTMLElement).offsetHeight -
        -(slide.value as HTMLElement).offsetHeight
    ) posY.value =
        -(inner.value as HTMLElement).offsetHeight -
        -(slide.value as HTMLElement).offsetHeight
}

// 准备一个右侧内容渲染的数组
const goodsList = ref<MyCateBrandGoodsItem>([])

// 准备一个根据当前数据请求分类内所有相关数据的方法
const getGoodsList = async (cate: string) => {
    // console.log(`我要根据${cate}去请求右边所有需要展示的数据`);

    // 1.根据当前cate请求回来品牌列表
    const brandList = await cateBrandListApi(cate)
    // console.log(brandList);

    // 2.根据品牌列表内的所有内容去请求商品列表
    const list: Promise<any>[] = []
    brandList.data.forEach((item: { brand: string }) => {
        list.push(categoryBrandGoodsListApi({ category: cate, brand: item.brand }))
    })

    const goods = await Promise.all(list)
    console.log(goods);

    // 3.组装数据 
    const res: MyCateBrandGoodsItem[] = []
    brandList.data.forEach((item: { brand: string }, index: number) => {
        res.push({
            cate,
            brand: item.brand,
            list: goods[index].data
        })
    })
    goodsList.value = res
    console.log(res);


}

// 准备分类列表数组
const cateList = ref<string[]>([])
// slide 导航切换事件
const slideChangeHandler = async (index: number) => {
    // index表示 当前切换的索引
    // 只要从cateList中拿到对应的索引位置数据即可
    // console.log('切换了,当前索引是:',index);

    // 拿到当前分类
    const cate = cateList.value[index]
    getGoodsList(cate)
}

// 挂载完毕的钩子函数
onMounted(async () => {
    const res = await categoryListApi()
    // console.log(res);
    cateList.value = res.data

    // 在渲染完毕以后
    getGoodsList(res.data[0])
})
</script>
<style scoped lang="scss">
.jd-category {
    display: flex;
    height: 100%;

    >.slide {
        height: 100%;
        position: relative;
        width: 80px;
        overflow: hidden;

        >.inner {
            position: absolute;
            left: 0;
        }
    }

    >.content {
        flex: 1;
        overflow-y: auto;

        >.item {

            >.title {
                height: 30px;
                font-weight: 700;
            }

            >ul {
                display: flex;
                box-sizing: border-box;
                padding: 10px;
                >li {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 20px;
                   

                    >img {
                        width: 50px;
                        height: 50px;
                        display: block;
                        margin-right: 15px;
                    }
                }
            }
        }
    }
}
</style>